<template>
  <div :id="id" :style="{ height:height,width:width }" />
</template>

<script>
import echarts from "echarts";
export default {
  props: {
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "390px",
    },
    data: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      chart: null,
      legendData: [],
      echartData: [],
      commentData: [
        {
          value: 145,
          name: "正向",
        },
        {
          value: 14,
          name: "负向",
        },
        {
          value: 5,
          name: "中立",
        },
      ],
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart = null;
  },
  methods: {
    erchartResize() {
      echarts.init(document.getElementById(this.id)).resize();
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id));
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
          data: ["正向", "负向", "中立", "腾讯网", "微信", "微博"],
        },
        series: [
          {
            name: "占比",
            type: "pie",
            selectedMode: "single",
            radius: [0, "50%"],

            label: {
              position: "inner",
            },
            labelLine: {
              show: false,
            },
            data:this.commentData
          },
          {
            name: "占比",
            type: "pie",
            radius: ["60%", "75%"],
            label: {
              formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
              backgroundColor: "#eee",
              borderColor: "#aaa",
              borderWidth: 1,
              borderRadius: 4,
              // shadowBlur:3,
              // shadowOffsetX: 2,
              // shadowOffsetY: 2,
              // shadowColor: '#999',
              // padding: [0, 7],
              rich: {
                a: {
                  color: "#999",
                  lineHeight: 22,
                  align: "center",
                },
                // abg: {
                //     backgroundColor: '#333',
                //     width: '100%',
                //     align: 'right',
                //     height: 22,
                //     borderRadius: [4, 4, 0, 0]
                // },
                hr: {
                  borderColor: "#aaa",
                  width: "100%",
                  borderWidth: 0.5,
                  height: 0,
                },
                b: {
                  fontSize: 16,
                  lineHeight: 33,
                },
                per: {
                  color: "#eee",
                  backgroundColor: "#334455",
                  padding: [2, 4],
                  borderRadius: 2,
                },
              },
            },
            data: [
              {
                value: 1,
                name: "腾讯网",
              },
              {
                value: 3,
                name: "微信",
              },
              {
                value: 5,
                name: "微博",
              },
            ],
          },
        ],
      };
      this.chart.setOption(option);
      var _this = this
      this.chart.on("click", function (params) {
        console.log(params);
        if (params.seriesIndex === 1) {
            _this.commentData.forEach((item) => {
                item.value = Math.floor(Math.random()*(1 - 100) + 100)
            });
            _this.chart.setOption(option);
        }
      });
    },
  },
};
</script>